<template>
	<div class="contains">
		 <div class="contains-item-content">
			  <div class="item-good" v-for="(item,key) in list">
				   <div class="check-select" :class="item['select']?'selected':''" :data-key="key" @click="toSelect"></div>
				   <div class="item-good-pic">
					   <image :src="host+item['proPic']" mode="aspectFill"></image>
				   </div>
				   <div class="item-good-info">
						<div class="item-good-title">{{item['name']}}</div>
						<div class="item-good-price">{{item['realPrice']}}￥</div>
				   </div>
			  </div>
		 </div>
		 <div class="footer-op">
		 	  <div class="footer-op-left">
		 		  <div class="footer-op-item">
					   <div class="footer-op-span">{{amount}}</div>
		 		  </div>	  
		 	  </div>
		 	  <div class="footer-op-right">
		 		   <div class="footer-btn-to-buy" @click="toSubmit">立即支付</div>
		 	  </div>
		  </div>
	</div>
</template>

<script>
	import { cartList , pay , prePay} from '../../../api/index.js';
	export default {
	  components:{
	  },
	  data(){
		 return {
			 amount:0,
			 id:0,
			 list:'',
			 host:this.$domain
		 }
	  },
	  onShow() {
	  },
	  onLoad(options) {
		 console.log(options,'444');
	  	 if (options.id){
			this.id = options.id;
		 }
		 this.getCartList();
	  },
	  created(){
	  },
	  mounted(){
	  },
	  methods:{
		 toSelect(e){
			var key = e.currentTarget.dataset.key;
			var _curData = this.list[key];
			_curData['select'] = !_curData['select'];
			this.toCaleAmount();
		 },
		 toCaleAmount(){
			var amount = 0; 
			for (var i=0; i<this.list.length;i++){
				if (this.list[i]['select']){
					amount+=this.list[i]['realPrice'];
				}
			} 
			this.amount = amount;
		 },
		 getCheckIds(){
			 var ids = [];
			 for (var i=0; i<this.list.length;i++){
			 	if (this.list[i]['select']){
					ids.push(this.list[i]['id']);
			 	}
			 } 
		 },
		 toSubmit(){
			var ids = this.getCheckIds(); 
            pay({id:ids,amount:this.amount}).then(res=>{
				var orderNo = res.orderNo;
				this.prePay(orderNo);
			});
		 },
		 prePay(orderNo){
			 prePay({orderNo:orderNo}).then(res=>{
				 uni.requestPayment({
				 	 timeStamp:res['timeStamp'],
					 nonceStr:res['nonceStr'],
					 package:res['package'],
					 signType:'MD5',
					 paySign:res['paySign']
				 });
			 })
		 },
		 getCartList(){
			 var data = {
				 id:-1,
			 };
			 if (this.id){
			 	 data['id'] = this.id;
			 }
			 cartList(data).then(res=>{
			 	var data = res.data;
				for (var i=0; i<data.length;i++){
					data[i]['select'] = false;
				}
                this.list = data;
			 })
		 } 
	  },
	};
</script>

<style>
	.contains-item-nav { display: inline-block; height: 100%; background: #eee; vertical-align: top; width: 20%; height: auto;}
	.contains-item-content { display: inline-block;  width: 79%; height: auto;}
	.item-nav { width: 100%; height: 40px; line-height: 40px; text-align: center;}
	.item-good { width: 90%; height: 90px; margin: 0 auto; padding-top: 10px;}
	.item-good-pic { display: inline-block; vertical-align: top; width: 60px; height: 60px; margin-left: 10px; background: yellow;}
	.item-good-pic image { width: 100%; height: 100%;}
	.item-good-info { display: inline-block; margin-left: 10px; width: 60%; }
	.item-good-price { color: #ff6600;}
	.check-select { display: inline-block; width: 20px; height: 20px; border-radius: 5px; background: #eee;}
	.selected { background: #ff6600;}
	.footer-op { width: 100%; height: 60px; position: absolute;  background: #ff3855; bottom: 0px;}
	.footer-op-left { width: 40%; height: 60px; vertical-align: top; background: #fff; display: inline-block;}
	.footer-op-right { width: 60%; height: 60px; display: inline-block;}
	.footer-op-i-text { text-align: center; height: 20px; line-height: 20px; color: #666; font-size: 13px;} 
	.footer-btn-to-cart {  display: inline-block; width: 60%; height: 60px; text-align: center; color: aliceblue; line-height: 60px; background: #fcb758;}
	.footer-btn-to-buy {  display: inline-block; width: 100%; height: 60px; text-align: center; color: aliceblue; line-height: 60px; background: #ff3855;}
	.footer-op-item { width: auto; height: 60px; line-height: 60px; padding-left: 10px;}
</style>